<template>
  <div class="shuju">
    <div class="mar_t20 ba_f outmain pad_20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>新增分销商</span>
        </div>
      </div>
      <div class="flex-bet">
        <div class="bflex-7 outmain" style="height: 390px;">
          <div id="mainEch" style="height:360px"></div>
        </div>
        <div class="bflex-3">
          <div class="bortColor flex-bet pad_20 flex-y-top">
            <div>
              <p class="title6 fon_14">待审核(人)</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{fxData.todayWait}}</p>
              <div class="flex">
                <p class="fon_12 title6 lh25">昨日 {{fxData.yesWait}}</p>
              </div>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">待审核</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
          <div class="bortColor flex-bet pad_20 flex-y-top mar_t20">
            <div>
              <p class="title6 fon_14">分销商(人)</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{fxData.todayOk}}</p>
              <div class="flex">
                <p class="fon_12 title6 lh25">昨日 {{fxData.yesOk}}</p>
              </div>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">分销商</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>分销商排行</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1" style="height: 620px;">
          <div class="flex t_l">
            <div class="title35">累计佣金Top10</div>
            <div class="toolTip mar_l10">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">统计周期内，累计佣金Top10</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
          <div class="mar_t10 shuju_table">
            <el-table :data="goodsData" stripe style="width: 100%">
              <el-table-column type="index" label="排名"></el-table-column>>
              <el-table-column prop="name" label="分销商姓名"></el-table-column>>
              <el-table-column prop="count" label="分销订单数"></el-table-column>
              <el-table-column prop="money" label="累计分销金额"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex-g-1 mar_l20" style="height: 620px;">
          <div class="flex t_l">
            <div class="title35">下级分销商Top10</div>
            <div class="toolTip mar_l10">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">统计周期内，下级分销商Top10</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
          <div class="mar_t10 shuju_table">
            <el-table :data="orderData" stripe style="width: 100%">
              <el-table-column type="index" label="排名"></el-table-column>>
              <el-table-column prop="name" label="分销商姓名"></el-table-column>>
              <el-table-column prop="count" label="下级人数"></el-table-column>
              <el-table-column prop="twoCount" label="二级人数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { distributionIndex } from '@/api/plug';

export default {
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
  },
  data() {
    return {
      fxData: {},
      goodsData: [],
      orderData: [],
      echarts1_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['待审核', '分销商']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '待审核',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: [10,20,30,40,50,60,70,80,90,100,110]
          },
          {
            name: '分销商',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: [110,220,310,40,50,60,70,80,90,100,110]
          }
        ]
      },
    };
  },
  methods: {
    init() {
      this.realProfit();
    },
    async realProfit() {
      this.bus.$emit('loading', false);
      const { data } = await distributionIndex();
      if (data) {
        this.fxData = data
        this.echarts1_option.series[0].data = data.waitAr.map((item) => item.money);
        this.echarts1_option.series[1].data = data.okArr.map((item) => item.money);
        this.echarts1_option.xAxis.data = data.waitAr.map((item) => item.hours);
        this.llkb();
        this.goodsData = data.moneyRank;
        this.orderData = data.subordinateRank;
      }
    },
    jrgk() {
      let myChart = echarts.init(document.getElementById('mainEch3'));
      myChart.setOption(this.echarts1_option3, true);
    },
    llkb() {
      let myChart = echarts.init(document.getElementById('mainEch'));
      myChart.setOption(this.echarts1_option, true);
    },
  }
};
</script>
